<template>
	<div style="display: flex;">
		<div style="margin-right: 20px;">
			<el-time-select v-bind="$attrs.startOptions" v-model="startTime" :start="startTimeStart" :step="startStep"
				:end="startTimeEnd" :placeholder="startPlaceholder" />
		</div>
		<div>
			<el-time-select v-bind="$attrs.endOptions" v-model="endTime" :start="startTimeStart" :step="startStep"
				:end="startTimeEnd" :placeholder="endPlaceholder" :disabled="endTimeDisabled" />
		</div>
	</div>
</template>

<script lang="ts" setup name="chooseTime">
	import {
		ref,
		watch
	} from 'vue'

	let props = defineProps({
		startPlaceholder: {
			type: String,
			default: '请选择开始时间'
		},
		
		endPlaceholder: {
			type: String,
			default: '请选择结束时间'
		},

		startTimeStart: {
			type: String,
			default: '08:30'
		},

		startStep: {
			type: String,
			default: '00:30'
		},

		startTimeEnd: {
			type: String,
			default: '24:00'
		},
	})

	let startTime = ref('')
	let endTime = ref('')
	let endTimeDisabled = ref(true)

	watch(() => startTime.value, val => {
		if (val === '') {
			endTime.value = ''
			endTimeDisabled.value = true
		} else {
			endTimeDisabled.value = false
			emits('startChange', val)
		}
	})

	watch(() => endTime.value, val => {
		if (val !== '') {
			emits('endChange', val)
		}
	})

	let emits = defineEmits(['startChange', 'endChange'])
</script>

<style scoped>

</style>
